<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
	
</head>
<body>
<div class="bbs">
    <header><span id="add">我要发帖</span></header>
    <section>
        <ul id="postList">
            
        </ul>
    </section>
    <div class="post" id="post" >
        <input class="title" placeholder="标题" id="title">
        <select id="section">
            <option value="-1" selected>请选择版块</option>
            <option value="电子书籍">电子书籍</option>
            <option value="新课来了">新课来了</option>
            <option value="新手报到">新手报到</option>
            <option value="职业规划">职业规划</option>
        </select>
        <textarea class="content" id="content" placeholder="内容"></textarea>
        <input class="btn" value="发布" id="publish"> <input class="btn" value="取消" id="cancel" style="background: #f00;">
    </div>
</div>
<script>
    
    var oAddBtn=document.querySelector("#add");
    var oPostDiv=document.querySelector("#post");
    var oPublish=document.querySelector("#publish");
    var oPostList=document.querySelector("#postList");
    var oCancelBtn=document.querySelector("#cancel");

    var oTitle=document.getElementById("title");
    var oSection= document.getElementById("section");
    var oContent =document.getElementById("content");
    var avatars=[
        'tou01.jpg',
        'tou02.jpg',
        'tou03.jpg',
        'tou04.jpg',
    ];
    oCancelBtn.addEventListener("click",hide)
    oPublish.addEventListener("click",publish);
    oAddBtn.addEventListener("click",show);
    var str=``;

        function show(){
            clearText();
            oPostDiv.style.display="block";
        }
        function hide(){
            clearText();
            oPostDiv.style.display="none";
        }
        function clearText(){
            oTitle.value = '';
            oSection.value = '-1';
            oContent.value = '';
        }
        function publish(){
            if(oTitle.value.trim()===''){
                alert("请输入帖子标题");
                oTitle.focus();
                return false;
            }
             else if(oSection.value==='-1'){ 
                alert("请选择帖子所属板块");
                oSection.focus();
                return false;
            }
             else if(oContent.value.trim()===''){
                alert("请输入帖子的内容");
                oContent.focus(); 
                return false;
            } 
            else{
                var title=oTitle.value;
                var section=oSection.value;
                var content=oContent.value;
                var index=Math.floor(Math.random()*avatars.length);
                var avatar=avatars[index];
                var now =new Date();
                var curTimestamp=now.getTime();
                var time = getTimeFormatText(curTimestamp);
                var fragment=document.createDocumentFragment();
                var oLi=document.createElement("li");
                oLi.innerHTML `<div><img src="./images/${avatar}"></div><h1>${title}</h1><p><span>版块：${section}</span><span>发表时间：${time}</span></p></li>`;
                fragment.appendChild(oLi);
                console.log(oPostList.firstElementChild);
                oPostList.insertAdjacentText(fragment,oPostList.firstElementChild);
                hide();

            }
        }
        function getTimeFormatText(dateTimeStamp){
            var minute = 1000 * 60;
            var hour = minute * 60;z
            var day = hour * 24;
            var week = day * 7;
            var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();   //获取当前时间毫秒
            var diffValue = now - dateTimeStamp;//时间差

        if(diffValue < 0){
            return;
        }
            var minC = diffValue/minute;  //计算时间差的分，时，天，周，月
            var hourC = diffValue/hour;
            var dayC = diffValue/day;
            var weekC = diffValue/week;
            var monthC = diffValue/month;
        if(monthC >= 1 && monthC <= 3){
            result = " " + parseInt(monthC) + "月前"
        }else if(weekC >= 1 && weekC <= 3){
            result = " " + parseInt(weekC) + "周前"
        }else if(dayC >= 1 && dayC <= 6){
            result = " " + parseInt(dayC) + "天前"
        }else if(hourC >= 1 && hourC <= 23){
            result = " " + parseInt(hourC) + "小时前"
        }else if(minC >= 1 && minC <= 59){
            result =" " + parseInt(minC) + "分钟前"
        }else if(diffValue >= 0 && diffValue <= minute){
            result = "刚刚"
        }else {
            var datetime = new Date();
            datetime.setTime(dateTimeStamp);
            var Nyear = datetime.getFullYear();
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            result = Nyear + "-" + Nmonth + "-" + Ndate
        }
            return result;
    }

</script>
</body>
</html>
